@if(isset($translators) && count($translators))
<div class="card" style="margin: 0 0 20px;display: none;">
    <div class="title text-center">翻译总排行</div>
    <div class="content content-pad">
        <div class="content-ul" style="width: 100%; text-align: left;">
            @foreach($translator_top3 AS $idx => $translator)
                <div class="content-li" style="{{$idx > 0 ? 'margin-top:5px;': ''}}display: flex; align-items: center; justify-items: left; width: 100%">
                    <a href="{{route('users.show', ['id' => $translator->id])}}" style="flex: 6; border-radius: 100px;">
                        <span style="display: inline-block; vertical-align: middle;">{{$translator->rank_name}}</span>&nbsp;&nbsp;
                        <span style=" border: 1px solid rgba(34, 36, 38, .5); display: inline-block; vertical-align: middle; padding: .2em; border-radius: 50px">
                            <img  style="margin: 0; border-radius: 18px"  src="{{$translator->avatar}}" width="33px" height="33px"/>
                        </span>&nbsp;
                        <span style="display: inline-block; vertical-align: middle;">{{$translator->name}}</span>
                    </a>
                    <span style="flex: 1; text-align: center; border-radius: 100px; border: 1px solid rgba(34, 36, 38, .5);">{{$translator->record_count}}</span>
                </div>
            @endforeach
        </div>
    </div>
    <div class="card-footer text-center">
        <a href="">查看完整排行</a>
    </div>
</div>

<div class="card" style="margin: 0 0 20px">
    <div class="title text-center">翻译月排行</div>
    <div class="content content-pad">
        <div class="content-ul" style="width: 100%; text-align: left">
            @foreach($translators AS $idx => $translator)
            <div class="content-li" style="{{$idx > 0 ? 'margin-top:5px;': ''}} display: flex; align-items: center; justify-items: left; width: 100%">
                <a href="{{route('users.show', ['id' => $translator->id])}}" style="flex: 6; border-radius: 100px;">
                        <span style=" border: 1px solid rgba(34, 36, 38, .5); display: inline-block; vertical-align: middle; padding: .2em; border-radius: 50px">
                            <img  style="margin: 0; border-radius: 18px"  src="{{$translator->avatar}}" width="33px" height="33px"/>
                        </span>&nbsp;
                    <span style="display: inline-block; vertical-align: middle;">{{$translator->name}}</span>
                </a>
                <span style="flex: 1; text-align: center; border-radius: 100px; border: 1px solid rgba(34, 36, 38, .5);">{{$translator->record_count}}</span>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif


